<template>
    <div class="skill">
        <!-- <div class="a-title c-title-3 c-bold">技术指标</div> -->
        <div class="a-title c-title-3 c-bold">
            {{ $t("message.Skill.a") }}
        </div>
        <div class="a-content c-title-5">
            <!-- 总结指标的建议 -->
            {{ $t("message.Skill.b") }}
            <v-tooltip location="top">
                <template v-slot:activator="{ props }">
                    <img src="@/assets/ask.png" class="i-ask" v-bind="props" />
                </template>
                <div class="more-t">
                    <!-- 此信息不是您个人应该做什么的建议，
                    因此请不要将这些数据作为投资建议。
                    与任何交易一样，始终谋定而后动。 -->
                    {{ $t("message.Skill.c") }}
                </div>
            </v-tooltip>
        </div>
    </div>
    <div class="tbls">
        <div class="tbl">
            <div class="tbl-t c-title-4 c-bold">
                <!-- 震荡指标 -->
                {{ $t("message.Skill.d") }}
            </div>
            <div class="tbl-c">
                <canvas class="canvas" ref="canvas1"></canvas>
            </div>
        </div>
        <div class="tbl">
            <div class="tbl-t c-title-4 c-bold">
                <!-- 总结 -->
                {{ $t("message.Skill.e") }}
            </div>
            <div class="tbl-c">
                <canvas class="canvas" ref="canvas2"></canvas>
            </div>
        </div>
        <div class="tbl">
            <div class="tbl-t c-title-4 c-bold">
                <!-- 震荡指标 -->
                {{ $t("message.Skill.f") }}
            </div>
            <div class="tbl-c">
                <canvas class="canvas" ref="canvas3"></canvas>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useAccount } from "@/stores/account";
import { Draw } from "./Draw";

const canvas1 = ref();
const canvas2 = ref();
const canvas3 = ref();

onMounted(() => {
    new Draw(canvas1.value, 90);
    new Draw(canvas2.value, 140);
    new Draw(canvas3.value, 30);
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
